<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    ul {
        padding: 0;
    }

    li {
        list-style: none;
        text-align: center;
        border-radius: 5px;
        background: skyblue;
    }
    ul {
        width: 100%;
        height: 400px;
        display: grid;
        /*grid-template-columns 用于定义每一列的宽度； grid-template-rows 用于定义每一行的高度*/
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 30% 30% 30%;
        /*grid-column-gap 用于设置网格列间距； grid-row-gap 用于设置网格行间距； grid-gap 是前两者的复合属性，第一个参数为行间距、第二个参数为列间距，也可以只用一个参数同时设置行和列。*/
        grid-gap: 5%;
    }
</style>
<body>
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>
</body>
</html>
